@charset "utf-8";
//计算根的像素大小
@function r($px) {
    @return ($px / 40) *1rem;
}

//计算减半的函数
@function half($px) {
    @return ($px / 2) *1px;
}

$color_them: #ffa969;
$font_size:r(30);
@mixin a_block {
    display: block;
    width: 100%;
    height: 100%;
}

@mixin middle {
    vertical-align: middle;
    display: inline-block;
}

html,
body {
    height: 100%;
    position: relative;
}

#main {
    position: absolute;
    top: half(123);
    bottom: half(135);
    width: r(750);
    padding: 0 half(23);
    box-sizing: border-box;
    //多出部分滚动
    overflow: scroll;
    // 滚动条产生滚动回弹的效果
    -webkit-overflow-scrolling: touch;
}

// 头部
.header {
    position: relative;
    .email {
        width: half(62);
        height: half(43);
        img {
            width: 100%;
        }
        span {
            position: absolute;
            right: half(23);
            top: half(32);
            display: block;
            width: half(28);
            height: half(28);
            border-radius: 50%;
            background-color: #fa5050;
            color: #fff;
        }
    }
}

// 登录部分
.login {
    position: relative;
    font-size: 0;
    height: r(170);
    .head {
        width: r(170);
        height: r(170);
        @include middle;
        a {
            @include a_block;
            img {
                width: 100%;
            }
        }
    }
    .text {
        @include middle;
        margin-left: r(24);
        h2 {
            font-size: half(30);
            margin-bottom: r(36);
            a {
                color: #000;
            }
        }
        h3 {
            font-size: half(26);
            a {
                color: #9d9d9d;
            }
        }
    }
    .next {
        display: inline-block;
        width: half(41);
        height: half(46);
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        a {
            @include a_block;
            img {
                width: 100%;
            }
        }
    }
}

.my_detail {
    ul {
        display: flex;
        li {
            flex: auto;
            width: r(194);
            height: r(149);
            margin-right: r(60);
            margin-top: r(28);
            margin-bottom: r(28);
            &:last-child {
                margin-right: 0;
            }
            a {
                @include a_block;
                img {
                    width: 100%;
                }
            }
        }
    }
}

.info_detail {
    .content_dd {
        position: relative;
        margin-bottom: r(30);
        font-size: 0;
        .info_left,
        .info_right {
            @include middle;
            h2,
            .more {
                @include middle;
            }
        }
        .info_right {
            position: absolute;
            right: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            h2 {
                font-size: r(24);
            }
            .more {
                width: r(25);
                height: r(26);
                a {
                    @include a_block;
                    img {
                        width: 100%;
                    }
                }
            }
        }
        .info_left {
            h2 {
                font-size: r(26);
            }
        }
        .info_left_img,
        h2,
        {
            @include middle;
        }
        .info_left_img {
            width: r(78);
            height: r(78);
            img {
                width: 100%;
            }
        }
    }
}

// 退出，注销
.exit {
    position: relative;
    margin: 0 r(80);
    input[type="button"] {
        width: r(145);
        height: r(75);
        line-height: r(75);
        background: $color_them;
        border: 0;
        border-radius: r(36);
        font-size: r(24);
        color: #fff;
    }
    input[title="exit"] {
        position: absolute;
        right: 0;
    }
}